<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Quill Mention Demo</title>
  <meta name="description" content="Quill Mention Demo">
  <link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
  <link href="quill.mention.min.css" rel="stylesheet">
</head>

<body>
  <h1>Quill Mention Demo</h1>

  <!-- Create the editor container -->
  <div id="editor"></div>

  <!-- Include the Quill library -->
  <script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
  <script src="quill.mention.min.js"></script>
  <style>
    body {
      font-size: 16px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

    .ql-editor {
      border: 1px solid #A3A3A3;
      border-radius: 6px;
    }

    .ql-editor:focus {
      border: 1px solid #025FAE;
    }

    .ql-mention-list-container {
      max-height: 300px;
      overflow: auto;
    }
  </style>
  <!-- Initialize Quill editor -->
  <script>
    const atValues = [
      { "id": "5a97b2a402de91c5b6c3e8a4", "value": "Josie Rice", "link": "http://www.josierice.com", "myCustomProperty": "custom value" },
      { "id": "5a97b2a464a8ff2d0996d2ef", "value": "Elva Bowman", "link": "mailto:elva@bowman.com", "myCustomProperty": "custom value" },
      { "id": "5a97b2a4ecb768a2092a298b", "value": "Ella Cochran", "link": "http://www.ellacochran.com", "myCustomProperty": "custom value" },
      { "id": "5a97b2a418b984d2aff97657", "value": "Knowles Walls", "link": "mailto:knowles@walls.com", "myCustomProperty": "custom value" },
      { "id": "5a97b2a4436c2c9acc6b5ad0", "value": "Hanson Webb", "link": "http://www.hansonwebb.com", "myCustomProperty": "custom value" },
      { "id": "5a97b2a4436c2c9acc6b5ad1", "value": "Maria Cruz", "link": "mailto:maria@cruz.com", "myCustomProperty": "custom value" },
      { "id": "5a97b2a4436c2c9acc6b5ad2", "value": "Pablo Escobar", "link": "http://www.pabloescobar.com", "myCustomProperty": "custom value" },
      { "id": "5a97b2a4436c2c9acc6b5ad3", "value": "Richard Smith", "link": "mailto:richard@smith.com", "myCustomProperty": "custom value" }
    ];

    const hashValues = [
      { "id": "5a97b2a402de91c5b6c3e8a5", "value": "Josie Price", "myCustomProperty": "custom value" },
      { "id": "5a97b2a464a8ff2d0996d2eg", "value": "Elva Showman", "myCustomProperty": "custom value" },
      { "id": "5a97b2a4ecb768a2092a298c", "value": "Ella Coach", "myCustomProperty": "custom value" },
      { "id": "5a97b2a418b984d2aff97658", "value": "Knowles Walis", "myCustomProperty": "custom value" },
      { "id": "5a97b2a4436c2c9acc6b5ad1", "value": "Hanson Webster", "myCustomProperty": "custom value" },
      { "id": "5a97b2a4436c2c9acc6b5ad2", "value": "Maria Cruiser", "myCustomProperty": "custom value" },
      { "id": "5a97b2a4436c2c9acc6b5ad3", "value": "Pablo Escobeer", "myCustomProperty": "custom value" },
      { "id": "5a97b2a4436c2c9acc6b5ad4", "value": "Richard Schmidt", "myCustomProperty": "custom value" }
    ]

    var quill = new Quill('#editor', {
      modules: {
        mention: {
          allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
          mentionDenotationChars: ["@", "#"],
          dataAttributes: ['myCustomProperty'],
          source: function (searchTerm, renderList, mentionChar) {
            let values;

            if (mentionChar === "@") {
              values = atValues;
            } else {
              values = hashValues;
            }

            if (searchTerm.length === 0) {
              renderList(values, searchTerm);
            } else {
              const matches = [];
              for (i = 0; i < values.length; i++)
                if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) matches.push(values[i]);
              renderList(matches, searchTerm);
            }
          },
        },
      }
    });
  </script>

</body>

</html>